<template>
  <div class="login-container">
    <!-- 背景装饰元素 -->
    <div class="bg-decoration"></div>

    <div class="login-wrapper">
      <!-- 左侧品牌区域 -->
      <div class="login-brand">
        <div class="brand-content">
          <div class="brand-logo">
            <el-icon :size="48" class="logo-icon">
              <Shield />
            </el-icon>
            <h1 class="brand-name">律师管理系统</h1>
          </div>
          <p class="brand-desc">专业的律师事务所管理解决方案，<br>让法律服务更高效、更规范</p>
          <div class="brand-stats">
            <div class="stat-item">
              <span class="stat-number">500+</span>
              <span class="stat-label">合作律所</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">2000+</span>
              <span class="stat-label">律师用户</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">99.9%</span>
              <span class="stat-label">系统稳定性</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单区域 -->
      <div class="login-form-panel">
        <div class="form-header">
          <h2 class="form-title">账户登录</h2>
          <p class="form-subtitle">请输入您的账号信息登录系统</p>
        </div>

        <el-form
          ref="ruleFormRef"
          :model="loginForm"
          :rules="rules"
          class="login-form"
          label-width="0px"
          :hide-required-asterisk="true"
        >
          <!-- 用户名输入框 -->
          <el-form-item prop="username" class="form-item">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入用户名"
              class="form-control"
              prefix-icon="User"
            />
          </el-form-item>

          <!-- 密码输入框 -->
          <el-form-item prop="password" class="form-item">
            <el-input
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              class="form-control"
              prefix-icon="Lock"
              :show-password="showPassword"
              @click:suffix="showPassword = !showPassword"
              suffix-icon="Eye"
            />
          </el-form-item>

          <!-- 记住密码和忘记密码 -->
          <div class="form-options">
            <el-checkbox v-model="rememberMe" class="remember-checkbox">
              记住密码
            </el-checkbox>
            <el-link type="primary" class="forgot-link" :underline="false">
              忘记密码?
            </el-link>
          </div>

          <!-- 登录和取消按钮 -->
          <el-form-item class="form-actions">
            <el-button
              type="primary"
              @click="submitForm(ruleFormRef)"
              class="login-btn"
              :loading="loginLoading"
            >
              登录
            </el-button>
          </el-form-item>

          <!-- 无需登录入口 -->
          <div class="document-entry">
            <router-link to="/document-system" class="doc-link">
              无需登录，直接进入律师文件管理
            </router-link>
          </div>
        </el-form>

        <div class="form-footer">
          <p class="copyright">© 2025 律道科技 版权所有</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import {  User, Lock}  from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus";
import useLoginStore from "@/stores/login";
import router from "@/router";

// 登录状态管理
const loginStore = useLoginStore()

// 表单类型定义
interface RuleForm {
  username: string
  password: string
}

// 表单实例引用
const ruleFormRef = ref<FormInstance>()

// 表单数据
const loginForm = reactive<RuleForm>({
  username: 'admin',
  password: '123456abc'
})

// 状态变量
const showPassword = ref(false)
const rememberMe = ref(true)
const loginLoading = ref(false)

// 密码验证规则
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else {
    const reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,15}$/
    if(!reg.test(value)){
      callback(new Error('密码需由8-15位字母和数字组成'))
    }
    callback()
  }
}

// 表单验证规则
const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' },
  ],
  password: [
    { validator: validatePassword, trigger: 'blur' },
  ],
})

// 提交表单
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return

  formEl.validate((valid) => {
    if (valid) {
      loginLoading.value = true
      // 调用登录接口
      loginStore.loginAction(loginForm)
        .then(res => {
          if (res.code === 200) {
            ElMessage.success('登录成功')
            // 记住密码逻辑
            if (rememberMe.value) {
              localStorage.setItem('username', loginForm.username)
              localStorage.setItem('password', loginForm.password)
            } else {
              localStorage.removeItem('username')
              localStorage.removeItem('password')
            }
            router.push("/home")
          }
        })
        .catch(error => {
          ElMessage.error(error.message || "登录失败")
        })
        .finally(() => {
          loginLoading.value = false
        })
    } else {
      ElMessage.error("请完善登录信息")
    }
  })
}

// 重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

// 页面加载时读取记住的密码
const initForm = () => {
  if (localStorage.getItem('username')) {
    loginForm.username = localStorage.getItem('username') || ''
    loginForm.password = localStorage.getItem('password') || ''
    rememberMe.value = true
  }
}

// 初始化表单
initForm()
</script>

<style scoped>
/* 背景容器 */
.login-container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #a9afb9 0%, #b6b6bb 100%);
}

/* 波浪 */
.login-container::before,
.login-container::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200%;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff20' d='M0,192L48,197.3C96,203,192,213,288,229.3C384,245,480,267,576,250.7C672,235,768,181,864,181.3C960,181,1056,235,1152,234.7C1248,235,1344,181,1392,154.7L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E")
  repeat-x;
  animation: wave 10s linear infinite;
}

.login-container::after {
  opacity: 0.4;
  animation-direction: reverse;
  animation-duration: 15s;
}

@keyframes wave {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(14, 161, 228, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(14, 161, 228, 0.1) 0%, transparent 40%);
  z-index: 1;
}

.login-wrapper {
  position: relative;
  z-index: 2;
  width: 1000px;
  height: 600px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  display: flex;
  overflow: hidden;
}

/* 左侧品牌区域 */
.login-brand {
  flex: 1;
  background-image: url('public/back3.jpg');
  background-size: cover; /* 图片自适应容器 */
  background-position: center; /* 图片居中居中 */
  background-repeat: no-repeat; /* 禁止重复 */
  color: #fff;
  padding: 60px 40px;
  position: relative;
  overflow: hidden;
}

.login-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

}

.brand-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 30px;
}

.logo-icon {
  color: #fff;
}

.brand-name {
  font-size: 28px;
  font-weight: 600;
  margin: 0;
}

.brand-desc {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 320px;
  margin: 0;
}

.brand-stats {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
}

/* 右侧登录表单区域 */
.login-form-panel {
  flex: 1;
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
}

.form-header {
  margin-bottom: 40px;
  text-align: center;
}

.form-title {
  font-size: 24px;
  font-weight: 600;
  color: #1d2129;
  margin: 0 0 8px 0;
}

.form-subtitle {
  font-size: 14px;
  color: #86909c;
  margin: 0;
}

.login-form {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 20px;
}

.form-control {
  height: 48px;
  border-radius: 8px;
  border-color: #e5e6eb;
  transition: all 0.3s ease;
}

.form-control:focus {
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  font-size: 14px;
}

.remember-checkbox {
  color: #4e5969;
}

.forgot-link {
  color: #1890ff;
  transition: color 0.2s;
}

.forgot-link:hover {
  color: #096dd9;
}

.form-actions {
  margin-bottom: 20px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #1890ff;
  border-color: #1890ff;
  transition: all 0.3s ease;
}

.login-btn:hover {
  background-color: #096dd9;
  border-color: #096dd9;
}

/*.login-btn:loading {*/
/*  background-color: #1890ff;*/
/*  border-color: #1890ff;*/
/*}*/

.document-entry {
  text-align: center;
  margin-top: 20px;
}

.doc-link {
  color: #1890ff;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.2s;
}

.doc-link:hover {
  color: #096dd9;
  text-decoration: underline;
}

.form-footer {
  margin-top: auto;
  text-align: center;
}

.copyright {
  font-size: 12px;
  color: #86909c;
  margin: 0;
}

/* 响应式调整 */
@media (max-width: 1024px) {
  .login-wrapper {
    width: 90%;
    height: auto;
    flex-direction: column;
    margin-top: 30px;
    margin-bottom: 30px;
    transform: none;
    top: 0;
  }

  .login-brand {
    padding: 40px 30px;
    text-align: center;
  }

  .brand-logo {
    justify-content: center;
  }

  .brand-desc {
    margin: 0 auto 30px;
  }

  .login-form-panel {
    padding: 40px 30px;
  }
}

@media (max-width: 576px) {
  .brand-stats {
    flex-direction: column;
    gap: 20px;
  }

  .form-header {
    margin-bottom: 30px;
  }

  .login-form-panel {
    padding: 30px 20px;
  }
}
</style>
